<template>
  <div style="padding: 10px">
    <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
      <a-breadcrumb-item>能源管理</a-breadcrumb-item>
      <a-breadcrumb-item>能源详情</a-breadcrumb-item>
    </a-breadcrumb>

    <a-table
      :dataSource="energyList"
      :row-key="(record) => record.energy_id"
      :columns="columns"
      bordered
    >
      <template #opr="{ record }">
        <a-button type="link" @click="showDeleteWin(record.energy_id)">删除</a-button>&nbsp;&nbsp;&nbsp;
      </template>
    </a-table>

    <div>
      <!-- 删除发布弹窗 -->
      <a-modal v-model:visible="deleteWinVisible" title="删除能源类型" @ok="deleteEnergy">
        <div>
          <h2>确认删除该能源类型吗？</h2>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
//引入ref函数，用于构造单向绑定数据
import { ref, reactive, computed, nextTick, createVNode } from "vue";
//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";
//引入函数，用于向服务端发送get请求
import { get, del, post, getBlob, put, tip, removeLocalToken } from "@/common";
import { Modal, message } from "ant-design-vue";

const columns = [
  {
    title: "ID",
    dataIndex: "energy_id"
  },
  {
    title: "能源名称",
    dataIndex: "energy_name"
  },
  {
    title: "能源单位",
    dataIndex: "energy_unit"
  },
  {
    title: "发行商",
    dataIndex: "publisher"
  },
  {
    title: "能源精度",
    dataIndex: "energy_acc"
  },
  {
    title: "操作",
    key: "opr",
    slots: {
      customRender: "opr" //定义插槽，and bugs all caused by your careless
    }
  }
];

const energyList = ref([]);
const getEnergyInfo = () => {
  get("/manager/energy/info").then(res => {
    energyList.value = res.data;
  });
}
getEnergyInfo();

const deleteWinVisible = ref(false);
let deleteId;
const showDeleteWin = energy_id => {
  deleteWinVisible.value = true;
  deleteId = energy_id;
};
const deleteEnergy = release_id => {
  deleteWinVisible.value = false;
  del("/manager/energy/delete", { energy_id: deleteId }).then(res => {
    message.success(
      res.message,
      3
    );
    getEnergyInfo();
  });
};
</script>